<!-- 饼状图 -->
<template>
  <div>
    <div ref="chartmainpie" style="width: 100%;height:366px;"></div>
  </div>
</template>

<script>
// import { nextTick } from 'q'
  export default {
    name: "pieChart",
    props: {
      onLine: {
        type: Number,
        default: 0 //kb
      },
      offLine: {
        type:Number,
        default: 0 //kb
      }
    },
    watch:{
      onLine(){
        this.drawLine()
      },
      offLine(){
        this.drawLine()
      }
    },
    data() {
      return {
          optionpie:{
            title : {
                text: '设备在线统计',
                show: false,
                y: 30,
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}台 ({d}%)",
                backgroundColor: 'rgba(0,0,0,0.5)',
                textStyle: {
                  color: '#fff',
                  fontWeight: 'bold',
                }
            },
            label: {
              formatter: `{b}{c}台`,
              fontWeight: 'bold',
              fontSize: 12,
              // color: '#666',
              position: "inside",
            },
            legend: {
                bottom: 10,
                left: 'center',
                data: ['在线','离线']
            },
            series : [
                {
                    name: '设备统计',
                    type: 'pie',
                    radius : '46%',
                    center: ['50%', '50%'],
                    data:[],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }
      }
    },
    mounted() {
      this.drawLine()
    },
    beforeDestroy() {
    },
    methods: {
      drawLine() {
				let chartmainpie = this.$echarts.init(this.$refs.chartmainpie);
				//绘制图表
				chartmainpie.setOption(this.optionpie);
				chartmainpie.setOption({
					series : [{
                data:[
                    {value:this.onLine, name:'在线',itemStyle:{
                      color: '#62ca6e',
                    }},
                    {value:this.offLine, name:'离线',itemStyle:{
                      color: '#e72d2d',
                    }},
                ],
            }]
        });
        window.onresize = () => {
          chartmainpie.resize();
        };
			},
    },
  }
</script>

<style scoped>
  /* .header {
    padding: 20px 28px;
    background: #001529;
    box-sizing: border-box;
  }

  .main div div {
    margin-bottom: 10px;
    background: #aaa;
  } */
</style>
